<template>
  <div class="alread_audit">
    <head-top head-title="房屋审核" go-back="true"></head-top>
    <p v-if="code === 400" style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      {{errorText}}
    </p>
    <div class="alread_main" v-if="code === 200">
      <!--搜索part-->
      <div class="search_part">
        <div class="box_input">
          <img src="../images/btn_search@2x.png" alt="">
          <input type="text" @keyup.enter="searchOwner"  @input="searchOwner" v-model="keyword" placeholder="搜索业主名">
        </div>
      </div>
      <ul v-for="(item,findex) in auditList" :key="findex">
        <div class="village_title"><span>{{item.title}}</span></div>
        <li v-for="(audit, index) in item.data" :key="index" @click="$router.push('/my/AuditDetail/'+audit.id)">
          <div class="owner_main">
            <div class="owner">
              <span>业主姓名：{{audit.real_name}}</span>
              <span>状态：
                <span class="gray_color">{{audit.status=3?'未通过':''}}</span>
              </span>
            </div>
            <p>联系方式：{{audit.phone}}</p>
            <p>所在小区：{{audit.roomNumber}}</p>
          </div>
        </li>
      </ul>
      <div class="default1" v-if="flag">
        <p>抱歉！暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../../header/Header.vue'
  import {HomeAuditList} from '../../../api/my'
  import {Indicator} from 'mint-ui'

  export default {
    name: 'RefuseAudit',
    data () {
      return {
        page: 3,
        auditList: [],
        flag: false,
        code: {
          type: Number
        },
        errorText: '',
        keyword: ''
      }
    },
    created () {
      // this._HomeAuditList()
    },
    mounted () {
      this._HomeAuditList()
    },
    methods: {
      _HomeAuditList () {
        Indicator.open({
          text: '..加载中..',
          spinnerType: 'fading-circle'
        })
        HomeAuditList(this.page).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Indicator.close()
            this.auditList = res.data
            this.code = res.code
            if (this.auditList.length === 0) {
              this.flag = true
            } else {
              this.flag = false
            }
          }
          if (res.code === 400) {
            this.code = res.code
            this.errorText = res.error
            Indicator.close()
          }
        })
      },
      // 搜索
      searchOwner() {
        Indicator.open({
          text: '..搜索中..',
          spinnerType: 'fading-circle'
        })
        HomeAuditList(this.page, this.keyword).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Indicator.close()
            this.auditList = res.data
            this.code = res.code
            if (this.auditList.length === 0) {
              this.flag = true
            } else {
              this.flag = false
            }
          }
          if (res.code === 400) {
            Indicator.close()
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .alread_audit{
    padding-top: 50px;
    .alread_main{
      .search_part{
        padding: 10px;
        .box_input{
          display: inline-flex;
          align-items: center;
          background: white;
          border: 1px solid #0c7ad9;
          border-radius: 20px;
          width: 100%;
          img{
            width: 20px;
            height: 20px;
            margin: 0 10px;
          }
          input{
            background: white;
            border: none;
            outline: none;
            padding: 10px 0;
            font-size: 15px;
            color: #999999;
          }
        }
      }
      ul{
        .village_title{
          width: 100%;
          background: #e6e6e6;
          padding: 10px 0;
          span{
            color: #292929;
            font-size: 15px;
            margin-left: 15px;
            letter-spacing: 3px;
          }
        }
        li{
          padding: 7px;
          .owner_main{
            box-shadow: 0 0 3px rgba(0,0,0,0.3);
            padding: 10px;
            border-radius: 5px;
            .owner{
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 15px;
              padding: 2px 0 7px 0;
              .gray_color{
                color: #545454;
              }
            }
            p{
              font-size: 14px;
              padding-top: 10px;
              color: #545454;
            }
          }
        }
      }
      .default1 {
        width: 100%;
        flex: 1;
        display: inline-flex;
        padding-top: 100px;
        justify-content: center;
        align-items: center;
        background: url("../../../assets/default.png") no-repeat;
        background-size: 100px 100px;
        background-position: center;
        padding-bottom: 140px;
        p {
          font-size: 15px;
          color: #0b7ad9;
          margin-top: 180px;
        }
      }
    }
  }
</style>
